<template>
    <div id="center-bar">
        <div class="left-title" v-if="isMobile">
            <Decoration7>
                <span style="padding: 0 10px">{{ title }}</span>
            </Decoration7>
        </div>
        <div ref="scrollWrap" style="width: 100%">
            <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list">
                <ul class="ui-wrap">
                    <li
                        class="li-item"
                        v-for="(item, i) of list"
                        :key="i"
                        :style="{
                            background: i % 2 == 0 ? 'rgb(54, 97, 189,0.7)' : ''
                        }"
                    >
                        <div class="title">{{ item.label }}</div>
                        <div class="content">
                            <span v-for="(el, index) of item.value" :key="index" class="item">
                                {{ el }}
                            </span>
                        </div>
                    </li>
                </ul>
            </vue3ScrollSeamless>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import type { PropType } from 'vue'
import { vue3ScrollSeamless } from 'vue3-scroll-seamless'
import { Decoration7 } from '@kjgl77/datav-vue3'

export default defineComponent({
    name: 'PolicyBarComp',
    components: {
        vue3ScrollSeamless,

        Decoration7
    },
    props: {
        classOptions: {
            type: Object
        },
        list: {
            type: Array as PropType<
                {
                    label: string
                    value: string[]
                }[]
            >
        },
        title: {
            type: String
        },
        height: {
            type: String
        },
        isMobile: {
            type: Boolean,
            default: true
        }
    },
    setup(props, { emit }) {
        const components = {
            scrollWrap: ref()
        }

        watch(
            () => props.height,
            () => {
                const scrollWrap = ref()
                let obj = scrollWrap?.value?.style
                obj.height = `${props.height}px`
            }
        )
        return {
            ...components
        }
    }
})
</script>
<style lang="scss" scoped>
#center-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.left-title {
    height: 50px;
    font-size: 28px;
    color: #ffffff;
    font-weight: bold;
}
.scroll-wrap {
    height: 280px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.ui-wrap {
    list-style: none;
    padding: 0;
    margin: 0 auto;
}
.li-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 20px 20px 0;
    text-align: center;
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
    &:hover {
        background: rgb(63, 124, 255) !important;
    }
    .title {
        width: 120px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
    }
    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        .item {
            text-align: left;
            font-size: 16px;
            color: #ffffff;
            font-weight: 400;
            margin: 5px 0;
            transition: all 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
            &:hover {
                cursor: pointer;
                color: rgb(119, 162, 255);
            }
        }
    }
}
</style>
